<template>
	<view class="userAllBox">
		<view class="useritemBox">
			<image class="userImage" :src="imageUrl +  personInfo.user_img" mode="aspectFill"></image>
			<view class="userCode">
				<view class="userName">
					{{personInfo.user_nick_name}}
				</view>
				<view class="userNumber">
					{{ [2, 3].includes(personInfo.user_identity) ? '# 西望达人' : '' }}
				</view>
			</view>
		</view>
		<view class="isItemBox">
			<view class="isMinX" @click="gotoMinxi">分享明细</view>
			<image class="leftIcon"
				src="https://file.whshiyuan.cn:9000/toopu/compressed/7451729215822_compressed_img.png" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watchEffect
	} from 'vue';
	import {
		imageUrl
	} from '../../../config/request/request';
	const props = defineProps({
		personInfo: {
			type: Object,
			default: () => {}
		}
	})
	//监听
	watchEffect(() => {
		console.log('props.personInfo==>', props.personInfo);
	})
	const userName = ref('Advens')
	const userNumber = ref('111111')
	const gotoMinxi = () => {
		uni.navigateTo({
			url: '/myselfSubpages/ShareBackMoney/MarkMoney'
		})
	}
</script>

<style scoped>
	.userName {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 47.74rpx;
		color: rgba(55, 57, 72, 1);
	}

	.userNumber {
		font-size: 22rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 34.48rpx;
		color: #044bad;
	}

	.userImage {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.useritemBox {
		display: flex;
		align-items: center;
	}

	.userCode {
		margin-left: 32rpx;
	}

	.isMinX {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 42.44rpx;
		color: rgba(0, 0, 0, 1);
	}

	.isItemBox {
		margin-top: -35rpx;
		display: flex;
		align-items: center;
	}

	.userAllBox {
		margin: 45rpx auto;
		display: flex;
		justify-content: space-between;
		width: 90%;
	}

	.leftIcon {
		width: 40rpx;
		height: 30rpx;
	}
</style>